<template>
	<view>
		<view class="wrap">
			<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/1.png" class="bg-set"
				mode=""></image>
		</view>


		<!-- 推荐壁纸 -->
		<view v-if="list1.length" class="">
			<view v-for="item in list1" class="recomennd" @click="detail(item)">
				<view class="rec">
					<view class="title">
						<image class="vip"
							src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/2.png" mode="">
						</image>
						{{item.atlasName}} {{item.type}}
					</view>
					<view class="more">
						More
						<image class="img"
							src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/3.png" mode="">
						</image>
					</view>
				</view>

				<view class="list">
					<view class="item" v-for="inner in item.resourcesList">

						<view class="img">

							<u-image bg-color="#aaff7f" :lazy-load="true" border-radius="20rpx" width="161rpx"
								height="161rpx" :src="inner.url" :fade="true" duration="450">
								<u-loading style="border-radius: 20rpx;" slot="loading"></u-loading>
								<view slot="error" style="font-size: 24rpx; background-color: none">
									<!-- 加载失败 -->
									<image class="img"
										src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/gallery/empty.png"
										mode=""></image>
								</view>
							</u-image>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
		<view v-else class="empty">
			<u-empty src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/nodata!.png" v-if="!list1.length && senDate"
				text="暂无数据" mode="list"></u-empty>
		</view>

	</view>

</template>
<script>
	export default {

		data() {
			return {
				hasbg: false,
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],
				categoryId: '',
				list2: [],
				ActiveStyle: {
					fontSize: '32rpx',
				},
				barSty: {
					width: '50rpx',
					height: '5rpx',
					background: '#68C3C9'
				},
				categoryList: [{
					name: '推荐'
				}, {
					name: '最新'
				}, {
					name: 'VIP专区'
				}, {
					name: '星空'
				}, {
					name: '海边'
				}, {
					name: '春天的花花'
				}],
				current: 0,

				inputStyle: {
					backgroundColor: 'none'
				},
			};
		},
		onLoad() {
			this.getlist()
		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;

				this.getlist();

			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		onPageScroll(e) { //uniapp自带的监听滚动条方法
			console.log(e);
			// this.scrollVal = e.scrollTop

			if (e.scrollTop >= 120) {
				this.hasbg = true
			} else {
				this.hasbg = false
			}

		},
		methods: {
			// 获取图集列表
			getlist() {
				this.senDate = false;
				this.$u.api.mine.atlas_list({
						page: this.formData.page,
						size: this.formData.pageSize,
						appletId: this.vuex_appletId
					})
					.then((res) => {
						this.senDate = true;
						if (res.code == 200) {
							this.total = res.data.total;
							this.list1 = this.list1.concat(res.data.list);


							this.list1 = this.list1.map(r => {
								return {
									...r,
									// resourcesList: r?.resourcesList?.slice(0, 4)
								}
							})
							console.log(this.list1, '********', this.formData.pageSize);

							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {
							console.log("请求数据失败");
						}
					});
			},
			// 获取分类列表


			detail(item) {
				console.log(item, 4444444444);
				const parameter = "?atlasId=" + item.atlasId + "&atlasName=" + item.atlasName

				if (item.type == 'mobile') {
					uni.navigateTo({
						url: "/subpackMain/gallery/mobilemore" + parameter
					})
				} else if (item.type == 'pc') {
					uni.navigateTo({
						url: "/subpackMain/gallery/pcmore" + parameter
					})
				} else {


					uni.navigateTo({
						url: "/subpackMain/gallery/biaoqingmore" + parameter

					})
					// 模拟别的
					// uni.navigateTo({
					// 	url:"/subpackMain/gallery/pcmore"+ parameter
					// })

					// uni.navigateTo({
					// 	url:"/subpackMain/gallery/mobilemore"+ parameter
					// })
				}

			}


		}
	};
</script>
<style scoped lang="scss">
	/deep/ .u-image__loading .u-image__error,
	/deep/ .u-image__loading .u-image__error {
		background: red !important;
	}

	//  /deep/ .u-image__error{
	// 	background-color: none !important;
	// }
	/deep/ .u-image__loading {
		border-radius: 20rpx;
	}

	.bgs {
		overflow: hidden;
		width: 100%;
		background: rgba(19, 20, 32, 0.95);
	}

	.wrap {

		// margin: 0 32rpx;
		.bg-set {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 181rpx;
			z-index: -1;
		}


	}

	/deep/ .u-tab-bar {
		margin-left: -3px !important;
	}

	.list {
		display: flex;
		align-items: center;

		.item {
			width: 161rpx;
			height: 161rpx;
			margin-right: 20rpx;

			&:last-child {
				margin-right: 0;
			}

			.img {
				width: 161rpx;
				height: 161rpx;
				border-radius: 20rpx;
			}
		}
	}


	.data-list {
		width: 100%;
		white-space: nowrap;
		margin: 24rpx 0 35rpx 0;
	}

	.data-list-item {
		display: inline-block;
		margin-right: 20rpx;

		.box {
			display: flex;
			align-items: center;
			background: rgba(255, 121, 121, 0.48);
			padding: 4rpx 18rpx 0 0;
			border-radius: 49rpx;
			font-size: 22rpx;
			font-family: PingFang HK-Light, PingFang HK;
			font-weight: 300;
			color: #FFFFFF;

			.image {
				width: 39rpx;
				height: 40rpx;
			}
		}
	}

	.recomennd {

		margin: 35rpx 32rpx 24rpx;

		.rec {
			// padding: 50rpx 0 24rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 27rpx;

			.title {

				font-size: 25rpx;
				font-family: PingFang HK-Light, PingFang HK;
				font-weight: 300;
				color: #FFFFFF;
				display: flex;
				align-items: center;

				.vip {
					width: 30rpx;
					height: 25rpx;
					margin-right: 8rpx;
				}

				.line1 {
					margin-right: 10rpx;
					height: 24rpx;
					width: 5rpx;
					background: linear-gradient(to bottom, #05FAFE, #EF44C4);
					border-radius: 12rpx;
				}
			}

			.more {
				font-size: 27rpx;
				font-family: PingFang HK-Light, PingFang HK;
				font-weight: 300;
				color: #FFFFFF;
				line-height: 32rpx;
				display: flex;
				align-items: center;

				.img {
					width: 9rpx;
					height: 16rpx;
					margin-left: 10rpx;
				}
			}
		}


	}
</style>
